<!-- 分类页面 -->
<template>
	<view>
		<!-- 照片 -->
		<view class="KTSJ">
			<image mode="aspectFill" class="imageFirst" :src="imgClassify" @click="toShopsList"></image>
		</view>
		<!-- 照片 -->
		<view class="KTSJ">
			<image mode="aspectFill" class="XXHY" :src="likeImg"></image>
		</view>
		<!-- 陪玩 -->
		<view style="width: 100%;">
			<!-- 详情 -->
			<view v-for="(item,index1) in offlineGamer" class="userView" :key="index1" @click="jumpPage(item)">
				<view class="UserData" :class="[item.sex == 2 ? 'boy' : 'girl']">
					<!-- 照片层 -->
					<view class="userImg">
						<image mode="aspectFill" class="userImg" :src="IMG_URL + item.links[0].link"></image>
					</view>
					<!-- 文字层 -->
					<view style="width: 100%;">
						<!-- 个人信息 -->
						<view class="briefly">
							<view class="UserName" :class="[item.sex == 2 ? 'boyMoney':'girlMoney']">
								{{item.name}}
							</view>
							<view style="font-size: 15px;width: 4rem;margin-left: 15rpx;"
								:class="[item.sex == 2 ? 'boyMoney':'girlMoney']">{{item.age}}</view>
						</view>
						<!-- 简介 -->
						<view class="userbriefly">
							<p class="userbriefly">{{item.signature}}</p>
						</view>
						<!-- 标签 -->
						<view class="tag-user">
							<view class="tag" v-for="(titleItem,index) in item.title" :key="index">
								<u-tag color="white" bg-color="#FF7F50" border-color="#FF7F50" :text="titleItem" size="mini" type="success"></u-tag>
						</view>
						<!-- 金额数目 -->
						<view class="boxWarp">
							<view class="boxWarpMoney" :class="[item.sex == 2 ? 'boyMoney':'girlMoney']">
								<image class="imgClass" :src="[item.sex == 2 ? imgBoy : imggirl]"></image>
								{{item.price+"币/小时"}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-loadmore :status="status" />
	</view>
</template>

<script>
	import {OfflineGamer,getRandomGamer} from "../../api/gamer";
	import {IMG_URL} from "../../config/URL";

  export default {
		async created() {
			// await this.getRandomGamers()
			await this.OfflineGamer(this.page)
		},
		data() {
			return {
        IMG_URL,
				offlineGamer:[],
				randomGamers: [],
        status:'',
				imgBoy:"../../static/image/userDetails/boyCoin.png",
				imggirl:"../../static/image/userDetails/girlCoin.png",
				likeImg:"../../static/image/swiper/xianxiahuyu.png",
				imgClassify:"../../static/image/swiper/kongtou.png",
				list: [
				  {
				    image: "https://img0.baidu.com/it/u=2161987666,4267232203&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
				  },
				  {
				    image: "https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
				  },
				  {
				    image: "https://img2.baidu.com/it/u=3209093749,3257663798&fm=253&fmt=auto&app=138&f=JPEG?w=508&h=500",
				  }
				],
				page:1,
			}
		},
		onPullDownRefresh(){
			// 下拉刷新
			this.getRandomGamers()
			uni.stopPullDownRefresh()
		},
		methods: {
			async onReachBottom() {
				this.page+=1
				await this.OfflineGamer(this.page)
			},
			jumpPage(item) {
			  let data = {
				gamer: item,
			    Userid: item.id,
			  }
			  uni.navigateTo({
			    // 参数传递
			    url: "/pages/user/userDetails?data=" + encodeURIComponent(JSON.stringify(data))
			  })
			},
      toShopsList() {
        uni.navigateTo({
          // 参数传递
          url:"/subPages/subShops/shopsList/index" //互娱师详情面
        })
      },
	  // 随机互娱师获取
	  async getRandomGamers(){
		  const res = await getRandomGamer({
			  limit: 5
		  });
		  this.randomGamers = res.data.data;
	  },

	  async OfflineGamer(y){
	  		  const res = await OfflineGamer({
				  page:y,
	  			  limit: 10,
				  sex:uni.getStorageSync('userInfo').sex
	  		  });
			  res.data.data.map(e=>{
			  		this.offlineGamer.push(e)
			  })
	  }
		}
	}
</script>

<style>
	.imgClass{
		width: 50rpx;
		height: 50rpx;
	}
	.boxWarp{
		width: 100%;
	}
.KTSJ{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}
.imageFirst{
	width: 90%;
	height: 250rpx;
	border-radius: 20rpx;
}
.XXHY{
	width: 90%;
	height: 200rpx;
	border-radius: 20rpx;
}
.userView {
		border-radius: 20px;
		margin-top: 20px;
	}

	// 变色层
	.boy {
		background: linear-gradient(white, #6CC7E2);
	}

	.girl {
		background: linear-gradient(white, #EFA7D2);
	}

	// 金额色彩
	.boyMoney {
		color: #09B6EA;
	}

	.girlMoney {
		color: #FF1493;
	}
	.UserName{
		font-size: 40rpx;
	}

	.boxWarpMoney {
		font-size: 1rem;
		margin-top: 10px;
		text-align: right;
		margin-right: 20px;
		float: right;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tag {
		margin-left: 8px;
		margin-top: 5px;
	}

	.tag-user {
		display: flex;
		flex-wrap: wrap;
	}

	.advertising {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.advertisingImg {
		margin-top: 2rem;
		height: 5rem;
	}

	.font-home {
		font-size: 1.1rem;
		margin: 1rem;
		font-weight: 900;
	}

	.UserData {
		border-radius: 20px;
		margin: 20rpx;
		display: flex;
		height: 130px;
	}

	.userImg {
		border-radius: 20px;
		height: 20px;
		width: 9rem;
		height: 130px;
	}

	.briefly {
		display: flex;
		font-size: 40rpx;
		flex-direction: row;
		align-items: center;
		margin: 0.5rem;
		color: #FF1493;
	}

	.userbriefly {
		margin: 0.2rem;
		font-size: 12px;
	}
</style>
